import React, { useEffect, useState, createContext } from 'react';
import { Table, Button, Input, Pagination, Space } from 'antd';
import AddUserDrawer from './components/addUser';
import EditUserDrawer from './components/edituser';
import { DownOutlined, PlusOutlined } from '@ant-design/icons';
import { connect } from 'dva';
import { roleName } from '@/utils/constant';
import styles from './member.css';


const { Search } = Input;
const pageLimit = 5

const theProps = (state) => {
  return {
    member: state.member.member,
    total: state.member.total
  }
}

export const MemberContext = createContext()

function Member(props) {

  const { member, total, dispatch } = props;
  useEffect(() => {
    dispatch({
      type: 'member/reqMember',
      payload: {
        current: 1,
        limit: pageLimit
      }
    })
    return () => {
    }
  }, [dispatch]);

  member.map((item, index) => {
    member[index] = { ...item, key: index }
  })

  // const tempData = [{
  //   username: 1,
  //   role: 1,
  //   gmtCreate: 1,
  //   id: 1,
  //   key: 1
  // }]

  const tableColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
      key: 'username',
      render: (username, item) => {
        // console.log('item', item);
        return (
          <div className={styles.user} >
            <div className={(item.key % 2 === 0) ? styles.user_img_1 : styles.user_img_2}>User</div>
            <div className={styles.user_text}>{username}</div>
          </div>
        )

      }
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      render: (role) => (roleName[role])
    },
    {
      title: '时间',
      dataIndex: 'gmtCreate',
      key: 'gmtCreate',
      render: (gmtCreate) => (<div style={{ float: 'right' }}><div>创建时间</div><span>{gmtCreate}</span></div>)
    },
    {
      title: '操作',
      dataIndex: 'id',
      key: 'id',
      render: (id, item) => {
        return (<Space style={{ float: 'right' }} size="middle">
          <a onClick={() => editUser(id, item)}>编辑</a>
          <a onClick={() => deleUser({ id: id, username: item.username })}>删除用户</a>
        </Space>)
      }
    },
  ]

  const [current, setCurrent] = useState(1)
  const [visible, setVisible] = useState(false)
  const [visibleEdit, setVisibleEdit] = useState(false);
  const [editId, seteditId] = useState(0);
  const [selectPeron, setSelect] = useState({})
  const onSearch = () => {

  }
  const onChange = (page) => {
    setCurrent(page)
    dispatch({
      type: 'member/reqMember',
      payload: {
        current: page,
        limit: pageLimit
      }
    })
  };

  const deleUser = (parms) => {
    dispatch({
      type: 'member/deleUser',
      payload: {
        id: parms.id,
        username: parms.username,
        current: current,
        limit: pageLimit
      }
    })
  };

  const addUser = () => {
    setVisible(!visible)
  };
  const editUser = (id, item) => {
    setSelect(item)
    seteditId(id)
    setVisibleEdit(true);
  }

  return (
    <div>
      <div>
        用户列表
        <Button
          style={{ marginLeft: '1em', float: 'right' }}
          size='small' type='primary'
          icon={<PlusOutlined />}
          onClick={addUser}
        >
          增加
        </Button>
        <Search
          style={{ width: '20em', float: 'right' }}
          size='small'
          placeholder="input search text"
          onSearch={onSearch}
          enterButton
        />
      </div>
      <Table
        style={{ height: '30em', marginTop: '1em' }}
        showHeader={false}
        pagination={false}
        columns={tableColumns}
        dataSource={member ? member : null}
        // dataSource={tempData}
      />
      <Pagination style={{ float: 'right', }} defaultPageSize={5} current={current} onChange={onChange} total={total} />
      <MemberContext.Provider value={{ visible: visible, setVisible: setVisible }}>
        <AddUserDrawer />
      </MemberContext.Provider>
      <MemberContext.Provider value={{ id: editId, visibleEdit: visibleEdit, setVisibleEdit: setVisibleEdit, member: selectPeron }}>
        <EditUserDrawer />
      </MemberContext.Provider>
    </div>
  )
}

export default connect(theProps, null)(Member)